<template>
  <el-select v-if="!isMultiple" v-model="selectValue" clearable :placeholder="props.placeholder" style="width: 240px"
    @change="updateValue">
    <el-option v-for="item in props.optionsInfo" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
  <el-select v-else v-model="selectValue" clearable :placeholder="props.placeholder" style="width: 240px" multiple
    collapse-tags collapse-tags-tooltip @change="updateValue">
    <el-option v-for="item in props.optionsInfo" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>

</template>

<script setup>
import { ref, computed, watchEffect } from 'vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  optionsInfo: {
    type: Array,
    default: [
      {
        value: '1',
        label: 'options1'
      },
      {
        value: '2',
        label: 'options2'
      }
    ]
  },
  placeholder: {
    type: String,
    default: '请输入选项'
  },
  isMultiple: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: String,
    default: ''
  }
})

const selectValue = ref()

const isMultiple = computed(() => {

  console.log('%c [  ]-36', 'font-size:13px; background:pink; color:#bf2c9f;', props.isMultiple)
  return props.isMultiple
})


watch(() => props.modelValue, (val) => {
  selectValue.value = val
}, {
  immediate: true
})

const updateValue = (val) => {
  emit('update:modelValue', val)
}

</script>

<style lang="scss" scoped></style>